import {saveWebEvent} from '../../bomb/db.event.js'

$(document).on('click', (e) => {
    let xPath = readXPath(e.target);
    let webRes = {
        event: e.type,
        xpath: xPath,
        domHtml: e.target.outerHTML,
        domText: e.target.innerText,
    };
    console.log(webRes)
    saveWebEvent(webRes)
});

// 获取xpath
function readXPath(element) {
    if (element.id !== "") {//判断id属性，如果这个元素有id，则显 示//*[@id="xPath"]  形式内容
        return '//*[@id="' + element.id + '"]';
    }
    // 这里需要需要主要字符串转译问题，可参考js 动态生成html时字符串和变量转译（注意引号的作用）
    if (element === document.body) {
        //递归到body处，结束递归
        return '/html/' + element.tagName.toLowerCase();
    }
    // 在nodeList中的位置，且每次点击初始化
    let ix = 1;

    // 同级的子元素
    const siblings = element.parentNode.childNodes;

    for (let i = 0, l = siblings.length; i < l; i++) {
        const sibling = siblings[i];
        // 如果这个元素是siblings数组中的元素，则执行递归操作
        if (sibling === element) {
            return readXPath(element.parentNode) + '/' + element.tagName.toLowerCase() + '[' + (ix) + ']';
            // 如果不符合，判断是否是element元素，并且是否是相同元素，如果是相同的就开始累加
        } else if (sibling.nodeType === 1 && sibling.tagName === element.tagName) {
            ix++;
        }
    }
}
